<template>
	<view class="orderlist-content">
		<view class="orderlist-item fillx t-bb-u" v-for="item in list" :key="item.id">
			<u-gap height="16" bg-color="#d7d7d7"></u-gap>
			<view class="order-number fillx frcc t-bb-u">
				订单号：{{item.order_no}}
				<text class="order-status mr">{{item.order_status|status}}</text>
			</view>
			<view class="order-message fillx t-bb-u frsc">
				<u-image class="order-message-img" width="20vw" height="20vw" :src="item.goods[0].image" border-radius="2vw" mode="aspectFill">
					<image class="order-message-img" src="../../../static/loading.gif" mode="scaleToFill" slot="loading"></image>
					<image class="order-message-img img_fail" src="../../../static/imgLoading_fail.png" mode="scaleToFill" slot="error"></image>
				</u-image>
				<view class="order-message-spec-wrap filly fccs">
					<view class="order-message-name frcc">
						{{item.goods[0].goods_name}}
						<view class="order-message-price">
							￥ {{item.goods[0].price}}
						</view>
					</view>
					<view class="order-message-spec frsc">
						<view class="order-message-spec-item frss">
							<view>
								规格：
							</view>
							<view>
								{{item.goods[0].spec|finalSpec}}
							</view>
						</view>
						<view class="order-message-count">
							x {{item.goods[0].buy_num}}
						</view>
					</view>
				</view>
			</view>
			<view class="order-balance fillx frsc">
				共{{item.count}}个商品 实付:
				<text class="order-balance-final-price mr">￥ {{item.order_amount}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			}
		},
		methods: {

		},
		computed: {

		},
		filters: {
			status(n) {
				return n === '0' ? '已取消' : n === '10' ? '待付款' : n === '20' ? '待发货' : n === '30' ? '待收货' : n === '40' ? '待评价' :
					'已完成'
			},
			finalSpec(specs) {
				let result = ''
				for (let key in specs) {
					result += key + ':' + specs[key] + ';\r\n\r\r\r'
				}
				return result
			}
		},
		mounted() {
			console.log(this.list)
		}
	}
</script>

<style scoped>
	.orderlist-content {
		width: 100vw;
		height: auto;
		/* background-color: #2C405A; */
	}

	/* .orderlist-item{
		border-top: 10px solid #d7d7d7;
	} */
	.orderlist-item {}

	.order-number {
		box-sizing: border-box;
		justify-content: space-between;
		color: #686868;
		padding: 10px 10px;
	}

	.order-message {
		height: auto;
		padding: 20rpx 20rpx;
	}

	.order-message-img {
		width: 20vw;
		height: 20vw;
		border-radius: 2vw;
		border: 1px solid #d7d7d7;
	}

	.order-message-spec-wrap {
		width: calc(80vw - 40rpx);
		height: auto;
		flex: 1;
		box-sizing: border-box;
		padding: 0 0 0 20rpx;
	}

	.order-message-name,
	.order-message-spec {
		width: 100%;
		justify-content: space-between;
		font-size: 14px;
		letter-spacing: 1px;
		color: #000000;
	}

	.order-message-spec {
		font-size: 14px;
		color: #a9a9bc;
		margin-top: 5rpx;
		margin-top: 20rpx;
	}

	.order-balance {
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 10px;
		font-size: 15px;
		color: #000000;
	}

	.order-balance-final-price {
		margin-left: 10px;
	}

	.order-message-spec-item {
		white-space: pre-line;
		width: 400rpx;
	}

	.img_fail {
		transform: scale(.6);
	}
</style>
